<template>
  <div class="index">
    <a-form :model="formData" ref="refForm" :rules="rules" auto-label-width>
      <a-form-item @change="change" label="名称" field="name" show-colon>
        <a-input v-model="formData.name"></a-input>
      </a-form-item>

      <a-form-item
        @change="change"
        label="考核周期"
        field="cycleType"
        show-colon
      >
        <a-radio-group v-model="formData.cycleType">
          <a-radio :value="1">试用期</a-radio>
          <a-radio :value="2">自定义</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="formData.cycleType === 2"
        label="选择周期"
        field="cycleStart"
        show-colon
      >
        <a-range-picker
          show-time
          format="YYYY-MM-DD"
          value-format="Date"
          v-model="rangeDate"
          @change="rangePickerChange"
        />
      </a-form-item>
      <a-form-item
        label="试用范围"
        field="performanceAssessmentTemplateRange"
        show-colon
      >
        <a-input-tag
          :default-value="['test']"
          v-model="formData.performanceAssessmentTemplateRange"
          allow-clear
        />
        <a-space>
          <a-button type="outline">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>选部门</template>
          </a-button>
          <a-button type="outline">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>选职位</template>
          </a-button>
          <a-button type="outline">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>选人员</template>
          </a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="状态" field="status" show-colon>
        <a-switch
          @change="change"
          v-model="formData.status"
          :checked-value="1"
          :unchecked-value="2"
          size="medium"
        >
          <template #checked> 启动 </template>
          <template #unchecked> 停止 </template>
        </a-switch>
      </a-form-item>
      <a-form-item label="描述" field="content" show-colon>
        <a-textarea
          @change="change"
          v-model="formData.content"
          show-word-limit
          :max-length="50"
          :auto-size="{
            minRows: 4
          }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
const props = withDefaults(
  defineProps<{
    templateData?: PerformanceAppraisal;
  }>(),
  {}
);
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      // validator: validateName
    }
  ],
  cycleType: [
    {
      required: true,
      message: '请选择'
    }
  ],
  cycleStart: [
    {
      required: true,
      message: '请选择'
    }
  ],
  performanceAssessmentTemplateRange: [
    {
      required: true,
      message: '请输入'
    }
  ]
});
//时间范围选择
const rangeDate = ref<any[]>([]);
const rangePickerChange = (vals: any) => {
  formData.value.cycleStart = vals[0];
  formData.value.cycleEnd = vals[1];
  change();
};
const emit = defineEmits(['update:templateData']);
const change = () => {
  emit('update:templateData', formData.value);
};
const formData = ref<any>({});
watch(
  () => props.templateData,
  () => {
    formData.value = cloneDeep(props.templateData);
    const { cycleStart, cycleEnd } = formData.value;
    rangeDate.value = [cycleStart, cycleEnd];
  },
  { deep: true }
);
const refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  return check;
};
defineExpose({ change, validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;
}
</style>
